<script setup lang="ts">
import { defineProps, PropType } from "vue";
import type { ConfigItem } from "./types/index.d";
import FormRender from "./types/index";
const props = defineProps({
  formList: {
    type: Array as PropType<ConfigItem[]>,
    default: () => []
  },
  modelValue: {
    type: Object,
    default: () => {}
  },
  inline: {
    type: Boolean, // 表单是否行内模式
    default: true
  }
});
// 获取表单项组件类型
const getComponent = (item: ConfigItem, data: any) => {
  const FormConfig = FormRender[item.type];
  return FormConfig(item, data);
};
</script>

<template>
  <el-form
    ref="formRef"
    :inline="inline"
    :model="props.modelValue"
    v-bind="$attrs"
  >
    <el-form-item
      v-for="(item, index) in props.formList"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :rules="item.rules"
      v-bind="item"
    >
      <component :is="getComponent(item, props.modelValue)" />
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped></style>
